<template>
    <div class="contain" v-loading="loading">
        <tz-breadcrumb  :pathArr='[{"name": "场景管理"},{"name": "餐厅管理", "url": "/home"},{"name": "订单管理", "url": ""},{"name": "订单详情", "url": ""}]'></tz-breadcrumb>
         <div class="return-pre"><span @click="returnOrderList" class="current-back"><span class="el-icon-d-arrow-left ml10"></span>返回订单管理</span></div>
        <div class="section-one-border">
           
            <el-row :gutter="10" class="section-one" style="margin-left:0px;margin-right:0px">
                <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="left">
                    <span>订单详情</span> 
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                    <!-- <div class="grid-content text-right add-btn" @click="edit(1,'','')">
                        <i class="el-icon-plus"></i>添加厨房</div> -->
                </el-col>
            </el-row>
        </div>
        <!-- table -->
        <div class="main-contain">
            <div class ="big_title">点餐类型：{{dinnerType==1?'客房送餐':'餐厅点餐'}}</div>
           <div v-if="dinnerType==2">
                <div v-for="(item,index) in SList" :key="item.id" >
                    <div class="first-title">服务员下单{{index+1}}</div>
                    <!-- <el-checkbox-group v-model="checkListServer"  @change="handleCheckedRight" > -->
                        <div class="model-menu-list-s" v-for="(itema,index2) in item.goods_list" :key="index2">
                        <div >
                        <!-- 左侧服务员下单菜单 -->
                            <div class="model-menu-list-border"  :key="index2">
                            <div class="model-menu-list-main">
                                <!-- 列表循环begin -->
                                <div >
                                <div class="model-menu-list-content" >
                                    <!-- <div class="check-box"><el-checkbox label="" >服务员下单{{index+1}}</el-checkbox></div> -->
                                    <div class="model-menu-list-content-li"  v-for="(itemb,index3) in itema.type_goods_list" :key="index3">
                                        <div class="left">{{itemb.goods_name}}</div>
                                        <div class="right text-right">x{{itemb.number}}</div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <!-- 列表底部统计 -->
                            <div class="model-menu-list-count text-right" >
                                已点<span class="numPrice">
                                {{itema.allnum}}
                                </span>份
                                <span class="distance">共¥</span><span class="numPrice">
                                    {{itema.allprice.toFixed(2)}}
                                    </span>
                            </div>
                            </div>
                        </div>
                        </div>
                    <!-- </el-checkbox-group> -->
                    </div>
                    <div v-for="item in CList" :key="item.id" >
                        <div class="first-title">客人下单</div>
                        <div class="model-menu-list-s" >
                          <div >
                          <!-- 左侧服务员下单菜单 -->
                              <div class="model-menu-list-border">
                                <div class="model-menu-list-main">
                                    <!-- 列表循环begin -->
                                    <div class="model-menu-list-content"  v-for="(itema,index2) in item.goods_list" :key="index2">
                                        <div class="check-box">菜单{{index2+1}}</div>
                                        <div class="model-menu-list-content-li"  v-for="(itemb,index3) in itema.type_goods_list" :key="index3">
                                            <div class="left">{{itemb.goods_name}}</div>
                                            <div class="right text-right">x{{itemb.number}}</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 列表底部统计 -->
                                <div class="model-menu-list-count text-right">
                                    已点<span class="numPrice">
                                    {{CList[0].allnums}}
                                    </span>份 <span class="distance">共¥</span><span class="numPrice">
                                    {{CList[0].allprices.toFixed(2)}}
                                    </span>
                                </div>
                              </div>
                          </div>
                        </div>
                  </div>
           </div>
           <div v-if ="dinnerType==1">
               <el-row :gutter="20" class="send-info-border" v-for="(item,index) in sendAllList" :key="item.id">
                <el-col :span="12" class="left-info">
                    <div class="send-info send-status-top">
                        <div class="send-info-title">订单状态</div>
                        <div class="orange-font">{{item.status == 1?'待支付':item.status == 2?'待收货':item.status == 3?'已完成':item.status == 4?'退款中':item.status == 5?'退款完成':'取消'}}</div>
                    </div>
                  <div class="send-info">
                    <div class="send-info-title">配送信息</div>
                    <div class="send-info-common">
                      <div class="left">客人姓名：</div>
                      <div class="right text-right">{{item.consignee_name}}</div>
                    </div>
                    <div class="send-info-common">
                      <div class="left">联系方式：</div>
                      <div class="right text-right">{{item.consignee_mobile}}</div>
                    </div>
                    <div class="send-info-common">
                      <div class="left">配送方式：</div>
                      <div class="right text-right">送至客房：{{item.room_number}}</div>
                    </div>
                    <div class="send-info-common">
                      <div class="left">预约时间</div>
                      <div class="right text-right">{{item.appointment_time}}</div>
                    </div>
                  </div>
                  <div class="send-info">
                    <div class="send-info-title">支付信息</div>
                    <div class="send-info-common">
                      <div class="left">支付订单号：</div>
                      <div class="right text-right">{{item.trade_no}}</div>
                    </div>
                    <div class="send-info-common">
                      <div class="left">支付方式：</div>
                      <div class="right text-right">支付宝支付</div>
                    </div>
                    <div class="send-info-common">
                      <div class="left">支付时间：</div>
                      <div class="right text-right">{{item.pay_time}}</div>
                    </div>
                    <div class="send-info-common">
                      <div class="left">支付金额：</div>
                      <div class="right text-right">{{item.actual_payment}}</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" class="right-info">
                    <div  class="right-info-border">
                      <div class="title">订单列表{{index+1}}</div>
                        <div class="s-list" v-for="(itema,index2) in item.goods_list " :key="index2" >
                            <div class="s-list-title">菜单{{itema.type+1}}</div>
                            <div class="s-list-content"  >
                              <div  class="" >
                                <ul  :class="[openMenuDetailStatus2[index][index2] == 1 ? 'menu-open':'menu-colse']">
                                  <li v-for="(itemb,index3) in itema.type_goods_list" :key="index3">{{itemb.goods_name}} <span >x{{itemb.number}}</span><span v-if="openMenuDetailStatus2[index][index2] == 1 ">等</span></li>
                                </ul>
                                <div class="s-list-count">已点<span class="numPrice">{{item.allnums}}</span>份<span class="distance">共¥</span><span class="numPrice">{{itema.allprice.toFixed(2)}}</span></div>
                              </div>
                              <!-- 底部操作 -->
                              <div class="btn-options text-right">
                                <div class="left">
                                  <!-- 备注：无 -->
                                  </div>
                                   <div class="right text-right" v-show ="openMenuDetailStatus2[index][index2] == 1 " @click="openMenuDetail(index,index2,'sa')">
                                  <span>收起菜单详情<i class="el-icon-arrow-up"></i></span>
                                </div>
                                <div class="right text-right" v-show="openMenuDetailStatus2[index][index2] == 0 " @click="openMenuDetailOpen(index,index2,'sa')" >
                                  <span>展开菜单详情<i class="el-icon-arrow-down"></i></span>
                                </div>
                                
                              </div>

                            </div>
                            <div class="s-list-title-remark">备注:{{item.remark=='' || item.remark==null?'暂无备注':item.remark}}</div>
                        </div>
                    </div>
                    <div class="text-right countDetail">总计：<span class="order-all-price">
                        ¥{{totalPay}}
                      </span>
                      </div>

                </el-col>
              </el-row>
              
           </div>
           <div class="text-center room-btn">
               <!-- 完成按钮当客房送餐的时候才出现 -->
                  <!-- <el-button type="warning" plain @click="sureArrived" v-if ="dinnerType==1 && (sendAllList[0].status == 1 || sendAllList[0].status == 2)">完成</el-button> -->
                  <!--退款按钮要是客房送餐 和 客人下单已支付状态才有退款  -->
                  <el-button type="warning" plain @click="refund" v-if="refundStatus">退款</el-button>
            </div>
            
           
        </div>      
    </div>
</template>
<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb'

export default {
    components: {
        'tz-breadcrumb': tzBreadcrumb,
    },
    data () {
      return {
        loading:false,
        list:[],
        // 1为客房送餐，二为餐厅点餐
        dinnerType:this.$route.query.dinnerType,
        SList:[],
        CList:[],
        sendAllList:[],
        totalPay:'',
        openMenuDetailStatus2:[],
        // 退款按钮是否出来
        refundStatus:false
      }
    },
    methods:{
        // 退款操作
        refund () {
          // ordersRefund
          var that = this;
          this.$confirm('确认退款吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
          }).then(() => {
              console.log(1);
              // 接口对接
              http.post(api.ordersRefund, {
                type:'agree',
                order_code: this.$route.query.order_code,
                seller_id: localStorage.getItem("seller_id"),
              }, (res) => {
              console.log(res);
              if(res.code == "10001"){
                  this.$message({
                  type: 'success',
                  message: '退款成功'
                  });
                  this.getOrderDetailData();
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                });
              }
              }, () => {
              console.log('网络错误');
              });
              
          }).catch(() => {
              console.log(2);
              this.$message({
                  type: 'info',
                  message: '已取消该退款操作'
              });
          }); 
          
        },
        // 返回订单列表
        returnOrderList(){
          this.$router.push({
            path: '/order-manage',
            query: {
              id:this.$route.query.rid,
            }
          });
        },
        //详情数据请求
        getOrderDetailData () {
           let that = this;
           that.loading = true;
           http.post(api.ordersDetails, {
                seller_id: localStorage.getItem("seller_id"),
                id: that.$route.query.id,
                restaurant_id: that.$route.query.rid
            }, (res) => {
               console.log(res);
               that.loading = false;
               if(res.code == "10001"){
                that.list = res.data[0].list;
                if(that.dinnerType == 2) {
                  var newArray  = [];//新数组
                  var j = 0;  
                  //查找符合条件值并存入新数组
                  for(let i in that.list){
                      if(that.list[i].type == '2'){
                        newArray[j++] = that.list[i]
                      }
                  }
                  // 赋值服务员下单列表
                  that.SList =  newArray;
                  console.log(that.SList);
                  // 赋值扫码下单列表
                  var newArrayCustom  = [];//新数组
                  var m = 0;
                  //查找符合条件值并存入新数组
                  for(let i in that.list){
                      if(that.list[i].type == '1'){
                        newArrayCustom[m++] = that.list[i]
                      }
                  }
                  that.CList =  newArrayCustom;
                  console.log(that.CList);
                } else {
                    that.sendAllList = res.data[0].list;
                    console.log(that.sendAllList);
                    // //  如果订单状态不是带配送或者已完成
                    if(that.sendAllList[0].status == 2 || that.sendAllList[0].status == 3){
                        that.refundStatus = true;  
                    } else {
                      that.refundStatus = false; 
                    }
                    that.totalPay = res.data[0].total_pay;
                    res.data[0].list.forEach(function(item,x){
                      that.openMenuDetailStatus2[x] = new Array(item.goods_list.length);
                      item.goods_list.forEach(function(item2,y){
                          that.$set(that.openMenuDetailStatus2[x],y,0)
                      })
                    });
                }
               } else {
                //  that.$message({
                //     type: 'info',
                //     message: res.msg
                //  });
                 that.$alert(res.msg, '', {
                    confirmButtonText: '确定',
                 });

               }
               
            }, () => {
              console.log('网络错误');
              this.loading = false;
            }); 
        },
        // 详情是否展开
        openMenuDetail (faType,currentType,currentCode) {
            let oldArr;
            let newArr;
            switch (currentCode) {
                case  'sa':
                oldArr =  this.openMenuDetailStatus2 ;
                newArr = oldArr.slice(0);
                newArr[faType][currentType] = 0;
                this.openMenuDetailStatus2 = newArr;
                break;
            }

        },
        openMenuDetailOpen(faType,currentType,currentCode){
            let oldArr;
            let newArr;
            switch (currentCode) {
                case  'sa':
                oldArr =  this.openMenuDetailStatus2 ;
                newArr = oldArr.slice(0);
                newArr[faType][currentType] = 1;
                this.openMenuDetailStatus2 = newArr;
                break;
            }
        },
        // 确认送达按钮点击事件
        sureArrived() {
            // var that = this;
            // this.$confirm('确认订单完成了吗?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning',
            //     center: true
            // }).then(() => {
            //     console.log(1);
            //     // 接口对接
            //     http.get(api.ordersComplete, {
            //       id: that.sendAllList[0].id
            //     }, (res) => {
            //     console.log(res);
            //     if(res.code == "10001"){
            //         this.$message({
            //         type: 'success',
            //         message: '订单已完成'
            //         });
            //         // 详情接口刷新
            //         that.getOrderDetailData();
            //     }
            //     }, () => {
            //     console.log('网络错误');
            //     });
                
            // }).catch(() => {
            //     console.log(2);
            //     this.$message({
            //         type: 'info',
            //         message: '已取消该操作'
            //     });
            // }); 
        },
    },
    mounted ()  {
      console.log(5555);
      var that = this;
      // 餐厅列表接口获取
      that.getOrderDetailData ();
      // 当为客人下单的时候并且订单状态为待配送和已完成的状态时出现退款按钮
      if(this.$route.query.cType == 1 && (this.$route.query.cStatus == 2 || this.$route.query.cStatus == 3)){
         this.refundStatus = true;
      }
  
    },
    
}
</script>
<style scoped>
.return-pre{
   color: #333;
   font-size: 16px;
   line-height:50px;
   color:#FF6F2E
}
.return-pre .ml10{
    margin-right:5px;
}
.current-back{
    cursor: pointer;
}
.section-one {
    background: #fff;
    line-height: 50px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    font-size: 16px;
    margin-top: 10px;   
}
.section-one,.main-contain{
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.06);
    margin-top:10px;
}
.section-one .left{
    font-size:16px;
    font-weight: bold;
}
.main-contain{
    padding:10px 20px 20px 20px;
    box-sizing: border-box
}
.big_title{
    line-height: 50px;
    color: #333;
    font-size: 16px;
    border-bottom:1px solid #e7e7e7;
    margin-bottom:20px;
}
.first-title{
    font-size:18px;
    color:#333;
}
.model-menu-list {
  width:100%;
  display: inline-block;
  /* overflow-x: scroll */
}
.model-menu-list-content .check-box{
  margin-bottom: 10px;
  font-size:14px;
  color:#999;
}
.model-menu-list-s{
  width:290px;
  height:auto;
  margin-right:25px;
  padding-top:20px;
  display: inline-block;
  color:#333;
}
.model-title-change{
  position: absolute;
  top:20px;
  left:20px;
  font-size: 18px;
  color: #303133;
}
.model-menu-list-border {
  border:1px solid #e7e7e7;
  border-radius:5px;
  height:350px;
  position: relative;
}
.model-menu-list-main{
  height:305px;
  overflow-x:hidden;
  overflow-y:scroll;
  padding:15px;
  box-sizing: border-box
}
.model-menu-list-main::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.model-menu-list-main::-moz-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.model-menu-list-count{
  position: absolute;
  bottom:0px;
  left:0px;
  width:100%;
  height:45px;
  line-height:45px;
  font-size: 16px;
  color:#333;
  padding:0 20px;
  box-sizing: border-box;
  border-top:1px solid #e7e7e7;
}
.model-menu-list-count .numPrice {
  font-weight: bold;
}
.model-menu-list-content{
  border-bottom:1px solid #e7e7e7;
  margin-top:10px;
  font-size:14px;
}
.model-menu-list-content:last-child{
  border-bottom:0px solid #e7e7e7;
}
.model-menu-list-content .check-box{
  margin-bottom: 10px;
}
.model-menu-list-content-li{
  display:flex;
  margin-bottom:10px;
}
.model-menu-list-content-li  .left{
  flex:1;
}
.model-menu-list-content-li  .right{
  width:80px;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #FF6F2E;
    border-color: #FF6F2E;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #333;
}
.el-checkbox__inner：hover{
  border-color: #FF6F2E;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
  border-color: #FF6F2E;
}
.el-checkbox-group{
  font-size: 14px;
}
.model-menu-list-m-b{
  /* display: flex;
  flex-wrap: wrap; */
  padding:10px 0 30px 0;
  box-sizing: border-box
}
.model-menu-list-m-b .model-menu-list-m-b-all{
  display: flex;
  flex-wrap: wrap;
}
.model-menu-list-all-border{
  width:100%;
  max-height:500px;
  overflow-y:scroll;
  display:flex;
  flex-wrap: wrap;
}
.model-menu-list-all-border::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.model-menu-list-m-b .first-title{
  margin-top:20px;
}
.send-info-border .left-info{
  border-right:1px solid #e7e7e7;
}
.send-info-border .right-info{
  color:#333;
  font-size:16px;
  height:415px;
  position: relative;
  
}
.send-info-border .right-info .title{
  margin-bottom:10px;
}
.right-info-border{
  padding-left:20px;
  box-sizing: border-box;
  position: relative;
  max-height:415px;
  padding-bottom:50px;
 
}
.send-info-border .left-info .send-info:first-child{
  padding-top:0px;
}
.send-info{
  color:#333;
  font-size:16px;
  padding:20px 20px 0 0;
  box-sizing: border-box;
  border-bottom: 1px solid #e7e7e7;

}
.send-info-common{
  display: flex;
  padding-bottom:15px;
  box-sizing: border-box; 
}
.send-info-title{
  margin-bottom: 20px;
}
.send-info-common .left{
  width:100px;
  color:#999;
}
.send-info-common .right{
  flex:1;
}
.s-list-title-remark{
  font-size: 14px;
  color:#333;
  margin-top:5px;
}
.s-list{
   font-size:14px; 
}
.s-list-title {
  color:#999;
  margin-bottom:5px;
  font-size:14px;
  width:100%
}
.s-list-content {
  position: relative;
  border:1px solid #e7e7e7;
  border-radius: 5px;
  padding:20px;
  box-sizing: border-box;
}
.s-list{
  margin-bottom:10px;
  max-height: 382px;
  padding-bottom:10px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y:scroll;
}
.s-list::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.s-list-content ul li{
  margin-bottom:10px;
  font-size:14px;
  color:#333;
}
.s-list-count{
  position:absolute;
  top:15px;
  right:10px;
  background-color:#fff;
  z-index:99;
}
.s-list-content ul.menu-colse {
  height:20px;
  overflow: hidden;
}
.s-list-content ul.menu-open{
  height:auto;
}
.select-menu-title span.numPrice,.s-list-count span.numPrice {
  font-weight: bold;
}
.select-menu-title span.distance,.s-list-count span.distance {
  margin-left:10px;
}
.select-menu-title-count {
  padding-top:10px;
}
.menu-list-right i  {
  font-size:22px;
  color:#FF6F2E;
  cursor: pointer;
}

.btn-options .right{
    width: 140px;
    color: #FF6F2E;
    cursor: pointer;
}
.btn-options {
  display: flex;
  margin-top:20px;
}
.btn-options .left{
  flex:1;
  padding-right:10px;
}
.btn-options .right{
  width:140px;
  color:#FF6F2E;
  cursor: pointer;
}
.btn-options .right i{
  margin-left:10px;
}
.room-btn{
    margin-top:40px;
}
.send-status-top{
    display: flex;
    justify-content: space-between
}
.send-status-top .orange-font{
    color:#FF6F2E;
}
</style>
